<script type="text/javascript" src="templates/ui/default/assets/PIDTreeUtils.tpl"></script>
<script type="text/javascript" src="templates/ui/default/assets/json2.js"></script>
<script type="text/javascript" src="templates/ui/default/assets/domutils.js"></script>
<script type="text/javascript" src="templates/ui/default/assets/popup.js"></script>
<script type="text/javascript">
  <!--
    _mRoot = JSON.parse('{{$menuInst|@json_encode|escape:'javascript'}}');
    
    function showMore(m_id, elm) {
      var m = null;
      for (var idx in _mRoot.c) {
        var obj = _mRoot.c[idx];
        if (obj.id == m_id) {
          m = obj;
        }
      }
      
      if (m && m.c.length > 0) {
        sub1(m, elm);
      }
    }
      
    function sub1(node, elm) {
      var extn, div, p, pos;
      
      p = new Popup();
      
      pos = DOMUtils.findPos(elm);
      div = document.createElement('div');
      div.style.cursor = 'pointer';
      div.style.width = elm.offsetWidth + 4 + 'px';
      div.style.height = elm.offsetHeight + 'px';
      div.style.position = 'absolute';
      div.style.top = pos[1] + 'px';
      div.style.left = pos[0] - 2 + 'px';
      div.onclick = function() {
        location.href = node.link;
      };
      p._bg.appendChild(div);
      
      extn = document.createElement('div');
      extn.className = 'sub_menu';
      extn.style.position = 'absolute';
      extn.style.top = pos[1] + elm.offsetHeight + 'px';
      extn.style.left = pos[0] - 2 + 'px';
      p._bg.appendChild(extn);
      for (var idx in node.c) {
        var obj = node.c[idx];
        div = document.createElement('div');
        div.className = 'sub_div';
        div.style.width = elm.offsetWidth + 4 + 'px';
        div.style.height = elm.offsetHeight + 'px';
        var table, tr, td;
        table = document.createElement('table');
        table.style.width = '100%';
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        td.appendChild(document.createTextNode(obj.name.toUpperCase()));
        td = tr.insertCell(-1);
        td.style.lineHeight = '26px';
        td.style.verticalAlign = 'top';
        td.style.textAlign = 'right';
        if (obj.c.length > 0) {
          td.appendChild(document.createTextNode('\u232a'));
        }
        div.appendChild(table);
        
        div._node = obj;
        div.onclick = function() {
          location.href = this._node.link;
        };
        extn.appendChild(div);
        
        div._node = obj;
        div._elm = div;
        div.onmouseover = function() {
          if (this._node.c.length > 0) {
            sub2(this._node, this._elm);
          }
        }
      }
      
      p._bg.onmousemove = function(ev) {
        ev = (ev) ? ev : window.event;
        var pos = DOMUtils.findPos(elm);
        if (!((ev.clientX >= pos[0] - 2
            && ev.clientX <= (pos[0] + elm.offsetWidth + 2)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + elm.offsetHeight))
            || (ev.clientX >= pos[0] - 2
            && ev.clientX <= (pos[0] + extn.offsetWidth + 2)
            && ev.clientY >= pos[1] + elm.offsetHeight
            && ev.clientY <= (pos[1] + elm.offsetHeight + extn.offsetHeight)))) {
          p._close();
        }
      };
    };
    
    function sub2(node, elm) {
      var extn, div, span, p, pos;
      
      p = new Popup();
      
      pos = DOMUtils.findPos(elm);
      div = document.createElement('div');
      div.className = 'sub_div';
      div.style.backgroundColor = '#868686';
      div.style.width = elm.offsetWidth + 'px';
      div.style.height = elm.offsetHeight + 'px';
      div.style.position = 'absolute';
      div.style.top = pos[1] + 'px';
      div.style.left = pos[0] + 'px';
      div.onclick = function() {
        location.href = node.link;
      };
      var table, tr, td;
      table = document.createElement('table');
      table.style.width = '100%';
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.appendChild(document.createTextNode(node.name.toUpperCase()));
      td = tr.insertCell(-1);
      td.style.lineHeight = '26px';
      td.style.verticalAlign = 'top';
      td.style.textAlign = 'right';
      if (node.c.length > 0) {
        td.appendChild(document.createTextNode('\u232a'));
      }
      div.appendChild(table);
      
      
      p._bg.appendChild(div);
      
      extn = document.createElement('div');
      extn.className = 'sub_menu';
      extn.style.position = 'absolute';
      extn.style.top = pos[1] + 'px';
      extn.style.left = pos[0] + elm.offsetWidth + 'px';
      p._bg.appendChild(extn);
      for (var idx in node.c) {
        var obj = node.c[idx];
        div = document.createElement('div');
        div.className = 'sub_div';
        div.style.width = elm.offsetWidth + 'px';
        div.style.height = elm.offsetHeight + 'px';
        var table, tr, td;
        table = document.createElement('table');
        table.style.width = '100%';
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        td.appendChild(document.createTextNode(obj.name.toUpperCase()));
        td = tr.insertCell(-1);
        td.style.lineHeight = '26px';
        td.style.verticalAlign = 'top';
        td.style.textAlign = 'right';
        if (obj.c.length > 0) {
          td.appendChild(document.createTextNode('\u232a'));
        }
        div.appendChild(table);

        div._node = obj;
        div.onclick = function() {
          location.href = this._node.link;
        };
        extn.appendChild(div);
        
        div._node = obj;
        div._elm = div;
        div.onmouseover = function() {
          if (this._node.c.length > 0) {
            sub2(this._node, this._elm);
          }
        }
      }
      
      p._bg.onmousemove = function(ev) {
        ev = (ev) ? ev : window.event;
        var pos = DOMUtils.findPos(elm);
        if (!((ev.clientX >= pos[0]
            && ev.clientX <= (pos[0] + elm.offsetWidth)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + elm.offsetHeight))
            || (ev.clientX >= pos[0] + elm.offsetWidth
            && ev.clientX <= (pos[0] + elm.offsetWidth + extn.offsetWidth)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + extn.offsetHeight)))) {
          p._close();
        }
      };
    };
  // -->
</script>

<style type="text/css">
.left {
  height: 33px;
  width: 1px;
  background-image: url(templates/ui/default/assets/ml.png)!important;
}
.right {
  height: 33px;
  width: 1px;
  background-image: url(templates/ui/default/assets/mr.png)!important;
}
.menu {
  background-image: url(templates/ui/default/assets/m.png)!important;
  background-repeat: repeat-x repeat-y;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 100px;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
}
.menu:hover {
  background-image: none!important;
  background-color: #868686;
}
.hi {
  background-image: none!important;
  background-color: #868686;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 100px;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
}
.last_menu {
  background-image: url(templates/ui/default/assets/mred.png)!important;
  background-repeat: repeat-x repeat-y;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 150px;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
}
.last_hi {
  background-image: none!important;
  background-color: #868686;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 100px;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
}
.last_menu:hover {
  background-image: none!important;
  background-color: #9d365b;
}
.last_left {
  height: 33px;
  width: 1px;
  background-image: url(templates/ui/default/assets/mred.png)!important;
}
.last_right {
  height: 33px;
  width: 1px;
  background-image: url(templates/ui/default/assets/mred.png)!important;
}
.sub_menu {
  background-image: url(templates/ui/default/assets/bb.png);
  background-repeat: repeat-x repeat-y;
}
.sub_div {
  background-image: none!important;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  width: 100px;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  line-height: 28px;
}
.sub_div:hover {
  background-color: #868686;
}
a.nav:link,a.nav:focus,a.nav:visited {
  color: #7D7D7D;
}
</style>

<div style="width: 1000px;">
  <table cellPadding="0" cellSpacing="0" width="100%">
    <tr>
      {{foreach $menuInst->c as $m}}
        <td class="{{if $m@last}}last_left{{else}}left{{/if}}"></td>
        <td class="{{if $m@last}}last_menu{{else if $m->id eq $idx}}hi{{else}}menu{{/if}}" onclick="location.href='{{$m->link}}'" onmouseover="showMore('{{$m->id}}', this);">{{$m->name|upper}}</td>
        <td class="{{if $m@last}}last_right{{else}}right{{/if}}"></td>
      {{/foreach}}
    </tr>
  </table>
</div>


<div style="width: 1000px;text-align: left;margin-top: 20px;padding-left: 15px;">
  <table cellPadding="0" cellSpacing="0">
    <tr>
      {{foreach $nav as $n}}
        <td style="height: 25px;">{{if !$n@last}}<a class="nav" href="{{$n->link}}">{{$n->name|upper}}</a>{{else}}{{$n->name|upper}}{{/if}}</td>{{if !$n@last}}<td style="width: 20px;text-align: center;">></td>{{/if}}
      {{/foreach}}
    </tr>
  </table>
</div>